<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<lv-group lvGutter="8px">
  <div class="vol-all-table">
    <lv-datatable
      [lvData]="totalTableData"
      #lvAllTable
      [(lvSelection)]="selection"
      (lvSelectionChange)="selectionChange($event)"
      lvSelectionMode="multiple"
      (lvStateChange)="stateChange($event)"
      lvCompareWith="id"
      [lvScroll]="{ y: '700px' }"
      [lvPaginator]="pageA"
      lvSize="small"
    >
      <thead>
        <tr>
          <th>
            <span>{{ 'protection_selecte_volume_label' | i18n }}</span>
          </th>
        </tr>
        <tr>
          <th lvShowCheckbox width="25px" [lvRowsData]="lvAllTable.renderData">
            {{ 'common_name_label' | i18n }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of lvAllTable.renderData">
          <td
            lvShowCheckbox
            [lvRowData]="item"
            [lvDisabled]="item.disabled"
            width="50px"
          ></td>
          <td>
            <lv-group lvGutter="8px">
              <span>{{ item.name }}</span>
            </lv-group>
          </td>
        </tr>
      </tbody>
    </lv-datatable>
    <ng-container *ngIf="totalTableData.length > 0">
      <lv-paginator
        #pageA
        lvMode="simple"
        lvShowPageSizeOptions="false"
        lvShowTotal="false"
        class="table-paginator"
      >
      </lv-paginator>
    </ng-container>
  </div>
  <div class="arrow-container">
    <i lv-icon="lv-icon-arrow-next" class="auto-protect-help"></i>
  </div>
  <div class="vol-selected-table">
    <lv-datatable
      [lvData]="selectionData"
      #lvSelectTable
      [lvScroll]="{ y: '700px' }"
      [lvPaginator]="pageS"
      lvSize="small"
    >
      <thead>
        <tr>
          <th>
            <lv-group class="th-group">
              <lv-group lvGutter="8px">
                <span>{{ 'protection_selected_volume_label' | i18n }}</span>
              </lv-group>
              <span class="aui-link" (click)="clearSelected()">{{
                'common_clear_all_label' | i18n
              }}</span>
            </lv-group>
          </th>
        </tr>
        <tr>
          <th>
            <lv-group lvGutter="8px">
              <span>{{ 'common_name_label' | i18n }}</span>
            </lv-group>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of lvSelectTable.renderData">
          <td>
            <lv-group class="th-group">
              <span>{{ item.name }}</span>
              <i
                lv-icon="lv-icon-close"

                lvColorState="true"
                (click)="removeSingle(item)"
              ></i>
            </lv-group>
          </td>
        </tr>
      </tbody>
    </lv-datatable>
    <ng-container *ngIf="selectionData.length > 0">
      <lv-paginator
        #pageS
        lvMode="simple"
        lvShowPageSizeOptions="false"
        lvShowTotal="false"
        class="table-paginator"
      >
      </lv-paginator>
    </ng-container>
  </div>
</lv-group>
